<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目管理页</title>
    <script type="text/javascript" src="../../js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="../../js/vue.js"></script>
    <script type="text/javascript" src="../../js/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库   3个:属性 事件 方法-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        a {
            text-decoration: none;
            color: black;
        }

        .modal input[type=text] {
            width: 600px;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        .modal button {
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100px;
        }

        .cancelbtn {
            padding: 14px 20px;
            background-color: #f44336;
        }

        .cancelbtn,
        .signupbtn {
            float: left;
            width: 50%
        }

        .container {
            padding: 16px;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
            padding-top: 60px;
        }

        .modal-content {
            background-color: #fefefe;
            margin: 5% auto 15% auto;
            border: 1px solid #888;
            width: 633px;
        }

        .close {
            position: absolute;
            right: 35px;
            top: 15px;
            color: #000;
            font-size: 40px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: red;
            cursor: pointer;
        }

        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
    </style>
</head>
<body>
<div id="app">

    <el-input v-model="serchs.projectName" placeholder="请输入项目名称,项目编号查询" style="width: 250px"></el-input>
    <el-button type="primary" plain @click="serchProjects()">查询</el-button>
    <el-button type="primary" plain @click="open()">点击新增</el-button>
    <!--新增-->
    <div v-show="addShow" style="align-content: center;">
        <form>
            <input type="text" name="projectName" v-model="addprojects.projectName" placeholder="项目名称" />
            <input type="text" name="projectIntro" v-model="addprojects.projectIntro" placeholder="项目简介" />
        </form>
    </div>
    <button @click="addProjects()" v-show="addShow">提交新增</button>
    <hr />

    <el-table :data="projects" border style="width: 80%" @selection-change="selectChange">
        <el-table-column type="selection">
        </el-table-column>
        <el-table-column prop="projectId" label="项目编号" width="180">
        </el-table-column>
        <el-table-column prop="projectName" label="项目名称" width="180">
        </el-table-column>
        <el-table-column prop="projectIntro" label="项目简介">
        </el-table-column>
        <el-table-column prop="createBy" label="当前状态">
        </el-table-column>
        <el-table-column label="操作">
            <!--scope 上下文很有用的对象-->
            <template slot-scope="scope">
                <a href="javascript:void(0)">成员管理 </a>
                <a href="javascript:void(0)" onclick="document.getElementById('mymodel1').style.display='block'" @click="apdateProject(scope)">
                    / 修改 / </a>
                <a href="javascript:void(0)" @click="apdateCz(scope)">{{scope.row.createBy == '有效'?'关闭':'打开'}}</a>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination @current-change="curChange" background layout="prev, pager, next" :total="total" :page-size="serchs.pageSize">
    </el-pagination>

    <!--更新model-->
    <div class="modal" id="mymodel1">
        <span onclick="document.getElementById('mymodel1').style.display='none'" class="close">×</span>

        <form class="modal-content animate" id="dt">
            <div class="container">

                <div>
                    当前项目
                    <input type="text" disabled="disabled" v-model="oldprojectName">
                </div>

                <div>
                    <label for="pn">项目名</label><br />
                    <input type="text" placeholder="请输入项目名" v-model="apdateproject.projectName">
                </div>

                <div>
                    <label for="pj">项目简介</label><br />
                    <input type="text" placeholder="请输入项目简介" v-model="apdateproject.projectIntro">
                </div>

                <div class="clearfix">
                    <button type="button" onclick="document.getElementById('mymodel1').style.display='none'" class="cancelbtn">
                        取消
                    </button>
                    <button class="signupbtn" @click="mtApdateProject()">
                        确认修改
                    </button>
                </div>
            </div>

        </form>
    </div>

</div>
<script>

    let app = new Vue({
        el: "#app",
        data: {
            /*接收回来的项目信息数组*/
            projects: [],
            /*分页查询的对象*/
            serchs: {
                pageSize: 5, //每日显示多少
                pageNum: 1, //当前页
                /*模糊查询*/
                projectName: ""
            },
            total: 0, //总条数
            pages: 0, //一共页数
            /*选中的数据的信息数组*/
            selections: [],
            /*新增的项目信息对象*/
            addprojects: {
                projectName: "",
                projectIntro: ""
            },
            /*新增是否显示*/
            addShow: false,
            /*修改对象的信息*/
            apdateproject:{
                projectId:"",
                projectName:"",
                projectIntro:""
            },
            /*修改前的项目名*/
            oldprojectName:"",
            /*修改操作状态的对象*/
            apdatecz:{
                projectId:"",
                createBy:""
            }
        },
        methods: {
            /*加载数据的方法*/
            loadProjects() {
                axios.post("/hubayi/queryAllProjectByPage", this.serchs).then(resp => {
                    this.projects = resp.data.object.list;
                    this.pages = resp.data.object.pages;
                    this.serchs.pageNum = resp.data.object.pageNum;
                    this.serchs.pageSize = resp.data.object.pageSize;
                    this.total = resp.data.object.total;
                    console.log(resp);
                })
            },
            /*获取被选中的列的所有数据数组*/
            selectChange(sel) {
                this.selections = sel
                console.log(sel)
            },
            /*点击改变页数后执行的方法 indexPage参数为当前页*/
            curChange(indexPage) {
                this.serchs.pageNum = indexPage;
                this.loadProjects();
            },
            /*模糊查询*/
            serchProjects() {
                this.loadProjects();
            },
            /*新增项目对象的方法*/
            addProjects() {
                axios.post("/hubayi/saveProjects", this.addprojects).then(resp => {
                    this.addprojects.projectName = "";
                    this.addprojects.projectIntro = "";
                    this.loadProjects();
                    console.log(resp);
                })
            },
            /*打开新增框*/
            open() {
                this.addShow = !(this.addShow);

            },
            /*修改*/
            apdateProject(scope){
                this.apdateproject.projectId = scope.row.projectId;
                this.oldprojectName = scope.row.projectName;
                console.log(scope);
            },
            /*确认修改的提交*/
            mtApdateProject(){
                axios.post("/hubayi/saveProjects", this.apdateproject).then(resp => {
                    console.log(resp);
                })
            },
            /*修改操作状态*/
            apdateCz(scope){
                this.apdatecz.projectId = scope.row.projectId;
                if(scope.row.createBy == "有效"){
                    this.apdatecz.createBy = "关闭";
                }else{
                    this.apdatecz.createBy = "有效";
                }
                axios.post("/hubayi/saveProjects", this.apdatecz).then(resp => {
                    this.loadProjects();
                })
            }

        },
        /*进来就会执行*/
        mounted() {
            /*调用加载数据的方法 进来就显示分页的数据*/
            this.loadProjects();
        }

    });

    // 获取模型
    var modal = document.getElementById('mymodel1');

    // 鼠标点击模型外区域关闭登录框
    window.onclick = function(event) {
        if(event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>
</body>
</html>